import React from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { Modal, Toast } from "antd-mobile";
import yhTools from "../../../tools/yh";
import { InterfaceG } from "../../../config/Config";
import "./PayDetail.scss";
import modal1 from "../../../images/modal1.png";
import modal2 from "../../../images/modal2.png";
import modal3 from "../../../images/modal3.png";
import PaypwdVerify from "../paypwdVerify/PaypwdVerify";
import AgreeCheckbox from "../../../component/agreeCheckbox";
import XhbPayExp from "../../../component/xhbPayExp/index";
class PayDetail extends React.Component {
	constructor(props) {
		super(props);

		/**
		 * 判断是否是SignRes返回,如果是需要打开弹出层,并且同意协议
		 */
		let signres_page = sessionStorage.getItem("signres_page");
		sessionStorage.removeItem("signres_page");
		let isSignres_page = !!signres_page;

		let paydetail_page = sessionStorage.getItem("paydetail_page");
		sessionStorage.removeItem("paydetail_page");
		let isPaydetail_page = !!paydetail_page;

		this.state = {
			loadStatus: "1",
			isVisible: false,
			showCancel: isPaydetail_page,
			isDisabled: false,
			payVisible: isSignres_page
		};
	}

	toggleModal = (showCancel = false) => {
		this.setState(prevState => ({
			isVisible: !prevState.isVisible,
			showCancel
		}));
	};
	hideCancel = () => {
		this.setState({
			showCancel: false
		});
	};
	jumpPaymentSetting = () => {
		this.props.history.push("/paymentSetting");
	};

	openPaypwd() {
		if (!this.state.isDisabled) {
			Toast.info("请阅读并同意《福建华通银行小辉宝支付服务协议》", 2);
			return false;
		}
		this.setState({ payVisible: true, showCancel: false });
	}

	/** 发送验证码 */
	async sendSMSCode(startTimer) {
		let objs = {
			url: InterfaceG.applyXhbPayCancel,
			params: {},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		let res = await yhTools.request(objs);
		Toast.hide();
		if (res.code === "0" || res.code === "30022") {
			startTimer();
			if (res.code === "30022") {
				Toast.info(res.message, 2);
			}
			return true;
		} else {
			Toast.info(res.message, 2);
			return false;
		}
	}

	/** 确认小辉包支付解约 */
	async confirmXhbPayCancel(params) {
		let objs = {
			url: InterfaceG.confirmXhbPayCancel,
			params,
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		let res = await yhTools.request(objs);
		Toast.hide();
		if (res.code === "0") {
			if (!res.data.errorMsg) {
				this.props.history.push({ pathname: "/rescissionsucc" });
			} else {
				this.props.history.push({
					pathname: `/rescissionfail`,
					state: {
						msg: res.data.errorMsg
					}
				});
			}
		} else {
			Toast.info(res.message, 2);
		}
	}

	agree() {
		this.setState({
			isDisabled: !this.state.isDisabled
		});
	}
	gotoxy() {
		sessionStorage.setItem("paydetail_page", "1");
		this.props.history.push("/signXHBXY");
	}

	render() {
		const headerParams = {
			header: {
				title: "小辉宝支付详情",
				rightButt: (
					<img
						src={require("../../../images/right-nav-more.png")}
						style={{
							width: "0.38rem",
							position: "relative",
							top: "0.06rem"
						}}
					/>
				),
				rightButtCallBack: this.toggleModal,
				goToApp: false
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		const { isVisible, showCancel } = this.state;
		return (
			<MainLayout pageParams={headerParams}>
				<div className="pay-detail-container">
					<section className="info">
						<img
							src={require("../../../images/imageXHB/xhb-open.png")}
							className="icon"
						/>
						<div className="title-wrapper">
							<img
								src={require("../../../images/imageXHB/tick-yes.png")}
								className="icon-yes"
							/>
							<span className="title">已开通小辉宝支付</span>
						</div>
						<p className="desc">
							每次支付优先扣除电子账户余额，
							<br /> 若余额不足才扣除小辉宝额度
						</p>
					</section>
					<section className="setting" onClick={this.jumpPaymentSetting}>
						<span>支付设置</span>
						<img
							className="item-right-arrow"
							src={require("../../../images/icon-arrorw-right.png")}
						/>
					</section>
					<XhbPayExp />
				</div>
				<Modal
					visible={isVisible}
					maskClosable
					onClose={() => this.setState({ isVisible: false })}
					transparent
					className="pay-detail-modal"
				>
					<div className="close" onClick={() => this.toggleModal(true)}>
						<span className="inner">关闭功能</span>
					</div>
				</Modal>
				<Modal
					visible={showCancel}
					className="close-pay-modal"
					transparent
					closable
					maskClosable={false}
					title="关闭小辉宝支付"
					onClose={this.hideCancel}
				>
					<p>
						<img src={modal1} alt="" />
						<span>小辉宝支付</span>
					</p>
					<p>
						<img src={modal2} alt="" />
						<span>一键支取</span>
					</p>
					<p>
						<img src={modal3} alt="" />
						<span>自动合并存单</span>
					</p>
					<AgreeCheckbox
						checked={this.state.isDisabled}
						onChange={this.agree.bind(this)}
					>
						<div className="xieyi">
							<span>阅读并同意签署</span>
							<a onClick={this.gotoxy.bind(this)}>
								《福建华通银行小辉宝支付服务协议》
							</a>
						</div>

						{/* <div > </div> */}
					</AgreeCheckbox>
					<div className="modalbtn" onClick={this.hideCancel}>
						下次再说
					</div>
					<div className="modalclose" onClick={() => this.openPaypwd()}>
						立即关闭
					</div>
				</Modal>
				<PaypwdVerify
					visible={this.state.payVisible}
					title="支付密码+短信验证码"
					onClose={() => {
						this.setState({ payVisible: false });
					}}
					onSubmit={form => this.confirmXhbPayCancel(form)}
					onSendSMSCode={cb => this.sendSMSCode(cb)}
				/>
			</MainLayout>
		);
	}
}

export default PayDetail;
